<!--
 @description
 @fileName Player.vue
 @author zengqiongying
 @created 2022/11/04 09:27:46
-->
<template>
  <div :class="{'visiable':!show}">
    <audio ref="audio-player" controls height="30" width="100">
      <source :src="src" type="audio/mpeg">
      <!-- <source src="horse.ogg" type="audio/ogg"> -->
      <embed height="30" width="100" :src="src">
    </audio>
  </div>
</template>

<script>
export default {
  name: 'AudioPlayer',
  props: {
    // 显示隐藏
    show: {
      type: Boolean,
      default: false
    },
    src: {
      // 音频文件地址
      type: String,
      default: ''
    }
  },
  data() {
    return {
      box: null,
      play: false, // 播放状态，true为正在播放
      sliderVal: 0, // 播放进度条当前时长
      sliderMin: 0, //
      sliderMax: 0, // 播放进度条总时长
      sliderValVolumn: 0.5, // 当前音量
      copySliderValVolumn: 0.5,
      duration: undefined, // 音频总时长(10:05)
      currentTime: undefined // 当前播放时长(03:15)
    }
  },

  computed: {
    hasVal() {
      return !(this.src === null || this.src === undefined || this.src === '')
    }
  },
  watch: {
    src: {
      handler(val) {
        this.$nextTick(() => {
          this.initAudio()
        })
      },
      immediate: true
    }
  },

  created() {

  },

  mounted() {
    this.$nextTick(() => {
      if (this.hasVoice) {
        this.initAudio()
      }
    })
  },

  methods: {
    initAudio() {
      if (!this.hasVal) return
      this.box = this.$refs['audio-player']
      this.box.src = this.src // require(`${this.src}`)
      // console.log('音频播放器DOM', this.box)
      const that = this
      // 时长发生变化时触发
      this.box.ondurationchange = function() {
        // console.log('时长发生了变化', that.box.duration)
        const d = that.box.duration
        that.sliderMax = Math.floor(d)
        that.$emit('duration', d)
        that.updateTime()
      }
      // 当前数据可用时触发
      this.box.oncanplay = function() {
        // console.log('已经可以播放了')
        that.$emit('ready')
      }
      // 播放位置发送改变时触发。
      this.box.ontimeupdate = function() {
        // console.log('播放位置发送了变动')
        that.updateTime()
      }
      // 音频播放完毕
      this.box.onended = function() {
        // console.log('播放完毕，谢谢收听')
        that.$emit('end')
      }
      // 音频加载失败
      this.box.onerror = function() {
        // console.log('音频加载出错！')
        that.$emit('error')
      }
    },
    // 音频播放时间更新
    updateTime() {
      const total = this.formatTime(this.box.duration)
      const current = this.formatTime(this.box.currentTime)
      this.duration = `${total.min}:${total.sec}`
      this.currentTime = `${current.min}:${current.sec}`
      // 值为xx.xxxxx 需要取整
      this.sliderVal = Math.floor(this.box.currentTime)
      this.$emit('update-time', {
        total: this.box.duration || 0,
        time: this.box.currentTime || 0,
        formatTotal: this.duration,
        formatTime: this.currentTime

      })
      this.curDura = Math.floor(this.box.currentTime * 1000000)
      const r = this.curDura / this.maxDuration
      this.curRate = Math.floor(r * 100)
    },
    formatTime(time) {
      // 格式化毫秒，返回String型分秒对象
      if (!time) return { min: '00', sec: '00' }
      return {
        min: Math.floor(time / 60).toString().padStart(2, '0'),
        sec: Math.floor(time % 60).toString().padStart(2, '0')
      }
    },
    // 播放
    audioPlay(play) {
      if (play) {
        // 执行播放
        this.box.play()
      } else {
        // 播放中，执行暂停
        this.box.pause()
      }
    },
    // 切换静音
    changeVolumns() {
      // 静音切换
      if (this.sliderValVolumn > 0) {
        this.sliderValVolumn = 0
      } else {
        this.sliderValVolumn = this.copySliderValVolumn
      }
    },
    spliderSelect() {
      this.box.currentTime = this.sliderVal
    },
    closeAudioPlay() {
      this.show = false
    }
  }
}

</script>
<style lang='less' scoped>
.visiable{
  visibility: hidden;
}
</style>
